<template>
    <div>
        <div class="jc">
            <span>
                <h2>{{titel}}</h2>
            </span>
            <span class="btn">
                <el-button @click="back()" style="margin:auto">返回列表</el-button>
            </span>
        </div>
        <div class="addimpl">
            <el-form ref="book" :label-position="labelPosition" label-width="80px" :model="book">
                    
                <el-form-item  prop="name" style="width:20vw" label="商品名称">
                    <el-input  v-model="book.name"></el-input>
                </el-form-item>

                <el-form-item prop="sn" style="width:20vw" label="商品序号">
                    <el-input v-model="book.sn"></el-input>
                </el-form-item>

                <el-form-item prop="price"  style="width:20vw" label="商品价格">
                    <el-input  v-model.number="book.price"></el-input>
                </el-form-item>

                <el-form-item prop="author" style="width:20vw" label="商品厂商">
                    <el-input v-model="book.author"></el-input>
                </el-form-item>

                <el-form-item prop="publisher" style="width:20vw" label="商品出处">
                    <el-input v-model="book.publisher"></el-input>
                </el-form-item>

                <el-form-item style="width:20vw" label="出厂时间">
                    <el-form-item prop="tpublish">
                        <el-date-picker type="date" 
                            placeholder="选择日期" v-model="book.tpublish" 
                            style="width: 100%;">
                        </el-date-picker>
                    </el-form-item>
                </el-form-item>

                <el-form-item  prop="bookType.id" label="商品类型">
                    <el-cascader v-model="book.bookType.value"  :options="types">
                    </el-cascader>
                </el-form-item>
                <div style="display:flex;justify-content:space-between;width:21vw;margin-bottom:20px">
                    <img style="width:150px" v-if="this.book.picture!='' " :src="`${imgUrl}/api/public/showImg/`+this.book.picture">
                    <el-upload class="avatar-uploader" :multipe="false"
					    :show-file-list="true" :auto-upload="false"
						:file-list="fileList"							
						:on-change="handleChange"
						action = "uploadAction"
						list-type="picture"
						accept="image/jpg,image/jpeg">
						<h2>点击这里更新图片</h2>
					</el-upload>
                </div>
            
                <div style="display:flex;justify-content:space-between;width:10vw">
                    <el-button type="primary" @click="submitForm('book')">提交</el-button>
                    <el-button @click="resetForm('book')">重置</el-button>
                </div>
            </el-form>
        </div> 
    </div>
</template>
<script>
    export default {
        name:'',
        props:[],
        data() {
            return {
                labelPosition:"left",
                types:[],
                book:{id:0,
                    name:'',sn:'',price:0.0,
                    publisher:'',tpublish:'',
                    picture:'',author:'',
                    bookType:{id:'',type:'',value:[]}
                },
                titel:"",
                fileList:[]
            }
        },
        methods:{
            handleChange(file,filelist){
                this.fileList = filelist;
            },
            //返回列表
            back(){
                this.$router.push({path:"/adm/book/book"})
            },
            //提交添加
            submitForm(formName){
                let fd = new FormData();
                let fs = this.fileList;
                if(fs.length>0 && fs[0].raw != null){
                    fd.append("pic",fs[0].raw)
                }

                for (const key in this.book) {
                    if(key=='tpublish'){
                        var time = this.df(this.book.tpublish);
                        fd.append(key,time);
                        continue;
                    }
                    if(key=='bookType' || key == 'picture'){
                        continue;
                    }
                    fd.append(key,this.book[key])
                }
                fd.append("bookType.id",this.book.bookType.value[1])
                this.$postFile("/api/adm/book/addBook",fd).then(
                    function(resp){
                        console.log(resp);
                        _this.book.picture = resp.data.data
                        console.log(_this.book.picture);
                        console.log(resp.data.data);
                        if(resp.data.code == '200'){
                            _this.$message({
                                message: '商品添加成功',
                                type: 'success'
                            });
                            _this.$refs[formName].resetFields();
                            return;
                        }
                        _this.$message.error("添加失败");
                        _this.$refs[formName].resetFields();
                    }
                )
            },
            //重置
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        },
        mounted(){
            window._this = this;
            this.titel = "商品添加";
            this.$get("/api/adm/type/findAll2")
            .then(function(resp){
                var types = resp.data.data;
                    for (const i in types) {
                        types[i].label = types[i].type
                        types[i].value  = types[i].id
                        if(types[i].pid == 0){
                            for (const j in types) {
                                if(types[i].id==types[j].pid){
                                    types[i].children = []
                                    types[i].children.push(types[j])
                                }
                            }
                            _this.types.push(types[i])
                        }
                    }
            })  

            var bookid = this.$route.query.id;
            if(bookid != undefined && bookid!=0){
                this.$get("/api/adm/book/findById/"+bookid)
                .then(function(resp){
                    _this.book = resp.data.data
                    _this.book.bookType.value = [resp.data.data.bookType.pid,resp.data.data.bookType.id]
                }) 
                this.titel = "商品修改";
            }
        }
    }
</script>
<style scoped="scoped">
    .jc{
        display: flex;
        margin: 0 5px;
        margin-bottom: 10px;
        justify-content:space-between;
        border-bottom: 2px solid gray;
    }
    input{
        width: 20vw;
    }
    tr{
        line-height: 40px
    }
    .addimpl{
        margin: 0 5px;
    }
    .btn{
        display: flex;
        justify-content: center;
        align-content:center;
    }
</style>
